<template>
  <!-- 售后管理 -->
  <div id="sale_all">
    <div class="nav">
      <hy-search
        class="search_box"
        ref="query"
        :searchTitle="searchTitle"
        v-model="searcher"
        :button="{ btnShowBy3: true }"
        :buttonText="{ btnNameBy3: '新增反馈' }"
        :col="6"
        @search="getlist(0)"
        @clickbybtn3="addpage()"
      ></hy-search>
    </div>
    <div class="aftersale_box">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column
            prop="xuhao"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createon"
            label="提交时间"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="componyname"
            label="客户名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="产品类型"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="proname"
            label="产品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="troublenum"
            label="问题数量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <el-row slot-scope="scope">
              <el-button size="mini" type="primary" @click="xq(scope.row.Id)"
                >详情</el-button
              >
            </el-row>
          </el-table-column>
        </el-table>
      </template>
      <div class="block">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增反馈"
      :visible.sync="dialogVisible"
      width="50%"
      :modal-append-to-body="false"
    >
      <div class="color_box"></div>
      <div class="aftersale_box1">
        <ul>
          <li>
            <span>产品名称</span>
            <el-input style="width: 70%" v-model="proname"></el-input>
          </li>
          <li>
            <span>产品类型</span>
            <el-input style="width: 70%" v-model="protype"></el-input>
          </li>
          <li>
            <span>客户名称</span>
            <el-select
              v-model="name"
              placeholder="请选择客户"
              style="width: 70%"
            >
              <el-option
                v-for="item in namevalue"
                :key="item.index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>问题数量</span>
            <el-input style="width: 70%" v-model="questionnum"></el-input>
          </li>
          <li style="width: 100%; height: 117px">
            <span style="line-height: 117px">问题描述</span>
            <el-input
              type="textarea"
              :rows="5"
              style="width: 70%"
              placeholder="请输入内容"
              v-model="textarea"
            ></el-input>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="add()">确定</el-button>
        <el-button type="info" size="medium" @click="dialogVisible = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="反馈详情"
      :visible.sync="dialogVisible2"
      width="50%"
      :modal-append-to-body="false"
    >
      <div class="color_box"></div>
      <div class="aftersale_box1">
        <ul>
          <li>
            <span>产品名称</span>
            <el-input style="width: 70%" v-model="proname1" readonly></el-input>
          </li>
          <li>
            <span>产品类型</span>
            <el-input style="width: 70%" v-model="protype1" readonly></el-input>
          </li>
          <li>
            <span>客户名称</span>
            <el-input style="width: 70%" v-model="name1" readonly></el-input>
          </li>
          <li>
            <span>问题数量</span>
            <el-input
              style="width: 70%"
              v-model="questionnum1"
              readonly
            ></el-input>
          </li>
          <li style="width: 100%; height: 117px">
            <span style="line-height: 117px">问题描述</span>
            <el-input
              type="textarea"
              :rows="5"
              style="width: 70%"
              placeholder="请输入内容"
              v-model="textarea1"
              readonly
            ></el-input>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="dialogVisible2 = false"
          >确定</el-button
        >
        <el-button type="info" size="medium" @click="dialogVisible2 = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      total: 1,
      current: 1,
      pagesize: 11,
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: "",
      },
      formInline: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入客户名称",
          prop: "customProductName",
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate",
        },
      ],

      tableData: [{}],
      namevalue: [],
      name: "",
      proname: "",
      protype: "",
      questionnum: "",
      textarea: "",
      name1: "",
      proname1: "",
      protype1: "",
      questionnum1: "",
      textarea1: "",
    };
  },
  created() {
    this.getval();
    this.getlist(0);
  },
  methods: {
    //详情
    xq(id) {
      this.dialogVisible2 = true;
      let arr = {
        Id: id,
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/AfterSaleManlst?index=2&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        this.proname1 = data3.proname;
        this.protype1 = data3.type;
        this.questionnum1 = data3.troublenum;
        this.textarea1 = data3.reason;
        this.name1 = data3.componyname;
      });
    },
    // 分页
    handleCurrentChange(e) {
      this.getlist(e - 1);
    },
    //获取客户
    getval() {
      let arr = {
        id: 1,
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/AfterSaleManlst?index=3&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        this.namevalue = data3;
      });
    },
    //新增页面
    addpage() {
      this.dialogVisible = true;
      this.proname = "";
      this.protype = "";
      this.name = "";
      this.questionnum = "";
      this.textarea = "";
    },
    //新增
    add() {
      let arr = {
        id: 2,
        proname: this.proname,
        protype: this.protype,
        compony: this.name,
        questionnum: this.questionnum,
        reason: this.textarea,
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/AfterSaleManlst?index=3&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = data1.string.__text;
        if (data3 == "保存成功") {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.getlist(0);
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    //列表数据
    getlist(page) {
      let arr = {
        pn: page,
        PerPageSize: 11,
        key: this.searcher.customProductName
          ? this.searcher.customProductName
          : "",
        start: this.searcher.issuanceDate[0]
          ? this.searcher.issuanceDate[0]
          : "",
        end: this.searcher.issuanceDate[1] ? this.searcher.issuanceDate[1] : "",
      };
      let arr1 = JSON.stringify(arr);
      axios(
        "apis/SalesManagement.asmx/AfterSaleManlst?index=1&jsondata=" + arr1
      ).then(({ data }) => {
        let data1 = this.$x2js.xml2js(data);
        let data3 = JSON.parse(data1.string.__text);
        this.total = data3.total;
        var listval = [];
        data3.lstall.forEach((item) => {
          listval.push(item);
        });
        this.tableData = listval;
        for (var i = 0; i < this.tableData.length; i++) {
          var dd = new Date(parseInt(this.tableData[i].createon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          this.tableData[i].createon = y + "-" + m + "-" + d + " ";
          this.tableData[i].xuhao = 1 + i + 11 * page;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.nav {
  background: $white;
  height: 50px;
  margin-top: 10px;
  width: 98%;
  padding: 0 1%;
  .search_box {
    width: 98%;
    padding-top: 5px;
  }
}

.block {
  padding-top: 10px;
  text-align: center;
}
.aftersale_box {
  margin-top: 10px;
}
.aftersale_box1 {
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    font-weight: bold;
    em {
      background: $red;
      color: $red;
    }
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 49%;
      height: 50px;
      margin-left: 1%;
      margin-top: 10px;
    }
  }
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}
#sale_all .el-dialog__body {
  padding-top: 0;
}
</style>
